<template>
  <div id="app">
    <Header class="header"/>
        <router-view></router-view>
    <!-- <div>hello</div>
    <audio ref="music" :src="url" controls></audio> -->
  </div>
</template>

<script>
 //import IndexHome from '../src/components/IndexHome.vue'
/* import Weather from '../src/components/Weather.vue'*/
import {L2Dwidget} from 'live2d-widget'
import Header from '../src/components/Header.vue'
export default {
  name: "App",
  data() {
    return {
      url: "",
    };
  },
  components:{
    Header
  },
  created() {
    this.getMusic();
  },
  mounted(){
    setTimeout(() => {
    L2Dwidget.init({
/*    pluginRootPath: 'static/live2dw/',
      pluginJsPath: 'lib/',
      pluginModelPath: 'live2d-widget-model-koharu/assets/', */
      tagMode: false,
      debug: false,
      /* model: { jsonPath: './assets/live2d/m1928a1_1501/m1928a1_1501.model.json' }, */
      model: { jsonPath: 'https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json' },
      /* model: { jsonPath: 'https://cdn.jsdelivr.net/gh/wangsrGit119/wangsr-image-bucket/L2Dwidget/live2d-widget-model-haruto/assets/haruto.model.json' }, */
      display: { position: 'left', width: 150, height: 300 },
      mobile: { show: true },
      log: false
    })
  }, 1000)
  },
  methods: {
    async getMusic() {
      const { data: res } = await this.$axios.get(
        "https://api.uomg.com/api/rand.music?sort=热歌榜&format=json"
      );
      console.log(res);
      this.url = res.data.url;
      console.log(this.url);
    },
  },
};
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
.header{
  position: absolute;
}
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background: rgba(91, 105, 136, 0.8);
}

::-webkit-scrollbar-track {
    background: rgb(194, 213, 241);
}
body{
  overflow-x: hidden;
}
</style>
